<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>

<div id="app">
    <label>用户名:</label><input type="text">
    <myinput label="用户名" label-width="150px"></myinput>
    <myinput label="密码" label-width="150px" prompt="请输入密码"></myinput>

    <h3>带选项的下拉列表</h3>
    <select>
        <option>初中</option>
    </select>
    <myselect :items="eduItems"></myselect>
</div>
<script>
    Vue.component("myinput",{
        template :
        `
         <div>
            <label style="display: inline-block"
            :style="{width:this.labelWidth||'100px'}">
            {{label}}:
            </label>
            <input :placeholder="placeholder">
        </div>
        `
        ,
        props :["label","label-width","prompt"],
        data(){
            return{
                placeholder : null
            };
        },
        created(){
            this.placeholder = this.prompt ||"请输入";
        }
    })

    Vue.component("myselect",{
        props: {
            //props对象写法 可以限定属性的类型 和验证规则
            items : Array  //限定items 必须是数组
        },
        data(){
          return {
              selectedIndex : 0,
              bgcolor :"#eee",
          }
        },
        template: `
        <div :style="{backgroundColor:bgcolor}">
         <select>
        <option v-for="item in items" >{{item}}</option>
        </select>
        </div>
        `,
    });

    var v = new Vue({
        el:"#app",
        data:{
            eduItems:["初中","高中","专科","本科"]
        },
        methods:{
            setColor(){
                //vue 的内置对象 以 $ 符号开头

            }
        }
    });
</script>
</body>
</html>